<template>
	
	<view class="videofilter"  @click="docanvas()">开始画布</view>
	<canvas canvas-id="canvas" id="canvas" width="460" height="360" @mousedown="startMouse" @mousemove="moveMouse" @mouseup="endMouse"></canvas>
	<!-- <canvas canvas-id="canvas" id="canvas" width="460" height="360" @touchstart="startMouse" @touchmove="moveMouse" @touchend="endMouse"></canvas> -->
</template>

<script>
	export default {
		data() {
			return {
				context:'',
				myPics:'',
			}
		},
		onLoad() {
		},
		methods: {
			docanvas(){
				this.startCaptureCanvas();
			},
			startCaptureCanvas(){
				// When true, moving the mouse draws on the canvas
				let isDrawing = false;
				let x = 0;
				let y = 0;
				
				this.myPics = document.querySelector('canvas');
				//const myPics = document.getElementById('canvas');
				console.log("myPics",this.myPics);
				this.context = this.myPics.getContext('2d');
				console.log("this.context",this.context);
				
			},
			startMouse(e){
				console.log("startMouse=",e);
				console.log("startMouse=",event);
				this.ctx = uni.createCanvasContext('canvas');
				this.ctx.setFillStyle('red');
				this.ctx.setLineCap('round');
				this.ctx.lineWidth = 6;
				this.ctx.strokeStyle = "#FF0000";
				this.ctx.moveTo(event.offsetX,event.offsetY);
			},
			moveMouse(e){
				this.ctx.lineTo(event.offsetX,event.offsetY);
				
			},
			endMouse(e){
				this.ctx.setFillStyle('red');
				this.ctx.stroke();
				this.ctx.draw(true);
			}
		}
	}
</script>

<style  lang="scss">
canvas {
  border: 1px solid black;
  width: 560px;
  height: 360px;
}
</style>
